<template>
	<view class="exception" :class="{'half':isHalf}" v-show="isShow" :style="userStyle">
		<image class="exception-img" v-if="type=='error' " src="http://ss.migudm.cn/mgmall/empty_error.png" mode=""></image>
		<image class="exception-img" v-else-if="type=='empty'" src="http://ss.migudm.cn/mgmall/empty_nothing.png" mode=""></image>
		<image class="exception-img" v-else-if="type=='custom' && imgUrl" :src="imgUrl" mode="">
		</image>
		<view class="message">{{message}}</view>
		<view v-if="showBtn" class="btn" @click="doEvent">{{btnMsg}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		computed: {
			imageTopStyle() {
				if (this.imageTop) {
					return uni.upx2px(this.imageTop / 2) + 'px';
				} else {
					return 0;
				}
				//             
			}
		},
		props: {
			// imageTop:{
			// 	type:Number,
			// 	default:0,
			// },
			isShow: {
				type: Boolean,
				default: false
			},
			message: {
				type: String,
				default: "当前网络不可用，请检查你的网络设置~",
			},
			showBtn: {
				type: Boolean,
				default: true
			},
			btnMsg: {
				type: String,
				default: '刷新'
			},
			isHalf: { //判断是否为半屏，主要控制图片距离页面上一元素的距离
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: 'error', //error,empty /custom:自定义图片
			},
			userStyle: {
				type: String,
				default: '', //error,empty
			},
			// 自定义图片地址
			imgUrl:{
				type: String,
				default: '',
			},
		},
		methods: {
			doEvent() {
				this.$emit('eventFun');
			}
		}
	}
</script>

<style lang="scss">
	.exception {
		width: 100%;
		background: #f6f6f6;
		text-align: center;
		padding-top: 336rpx;
		padding-bottom: 64rpx;

		.exception-img {
			width: 240rpx;
			height: 240rpx;
		}

		.message {
			font-size: 28rpx;
			font-weight: 400;
			margin-top: 18rpx;
			color: #999;
			line-height: 40rpx;
		}

		.btn {
			width: 230rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			color: #fff;
			background: #ff004f;
			border-radius: 32rpx;
			font-size: 32rpx;
			font-weight: 600;
			margin: 48rpx auto;
		}

		.btn:active {
			opacity: 0.5;
		}

		&.half {
			padding-top: 96rpx;
		}
	}
</style>
